<template lang="pug">
data-page(
  v-bind="pageParams"
)
  mt-table(
    v-bind="tableProps"
  )

  edit-form(
    v-bind="editFormProps"
  )
lisDataModel(v-model="lisDataModelShow")
</template>

<script setup lang="ts">
import {
  type FormItemProps,
  type IAction,
  type DataPageProps,
  type Action,
  type EditFormProps,
  type TableProps,
  useNotify,
} from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { type QueryPagination, useApi } from "@scmt/core-api";
import type { LisDataEntity, LisDataQueryParams } from "@scmt/api-lis-lis-data";

const $api = useApi();
const $notify = useNotify();
const queryPramas = reactive<LisDataQueryParams>({
  name: "",
  pageNum: 1,
  pageSize: 20,
});

//添加 Props属性
const props = defineProps({
  equimentId: {
    type: String,
    default: () => "",
  },
});
const editingObj = ref<null | LisDataEntity>(null);
const lisDataModelShow = ref(false);
const disabled = ref(false);

const { request, data, loadingMap } = useRequest({
  tableData: (q: any) => {
    const params = Object.assign({}, queryPramas, q);
    return $api.lis.lisData.query(params);
  },
  save: (model: LisDataEntity) => {
    return $api.lis.lisData.save(model).then(() => {
      $notify.success("保存成功");
      editingObj.value = null;

      request("tableData", {
        pageSize: 20,
      });
    });
  },
  destroy: (ids: string) => {
    return $api.lis.lisData.destroy(ids).then(() => {
      $notify.success("删除成功");

      request("tableData", {
        pageSize: 20,
      });
    });
  },
  listAsOptions: () => {
    return $api.lis.equipment.listAsOptions();
  },
});

const pageParams = computed<DataPageProps>(() => {
  const queryFields: FormItemProps[] = [
    {
      prop: "code",
      label: "项目编号",
    },

    {
      prop: "equipmentManufacturerModel",
      label: "设备型号",
    },

    {
      prop: "personName",
      label: "检测者",
    },
  ];

  const headerActions: Action[] = ["add"];

  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    //actions: headerActions,
    onQuery: () => request("tableData"),
    onAct: onPageActions,
    alignAction: "left",
  };

  return dataPageProps;
});

const tableProps = computed(() => {
  const { tableData } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    insertIndex: false,
    columns: [
      {
        prop: "code",
        label: "项目编号",
        tooltip: true,
      },
      {
        prop: "type",
        label: "设备类型",
        tooltip: true,
        render: ({ row }) => {
          const patientType = data.listAsOptions ?? [];
          let resText = row.type;
          if (patientType && patientType.length > 0) {
            let filter = patientType.filter((item) => item.value == row.type);
            if (filter && filter.length > 0) {
              resText = filter[0].label;
            }
          }
          return h("div", resText);
        },
      },
      {
        prop: "equipmentManufacturerModel",
        label: "设备型号",
        tooltip: true,
      },
      {
        prop: "personName",
        label: "检测者",
        tooltip: true,
      },
      {
        prop: "item",
        label: "检查项目",
        tooltip: true,
      },
      {
        prop: "data",
        label: "数据",
        tooltip: true,
      },
      {
        prop: "time",
        label: "检查时间",
        tooltip: true,
      },
      {
        label: "操作",
        fixed: "right",
        actions: [
          { event: "check", label: "查看", type: "danger" },
          { event: "edit", label: "编辑", type: "danger" },
        ],
      },
    ],
    onAct: onPageActions,
    onPaginate: (pagination: QueryPagination) =>
      request("tableData", pagination),
  };
  return tableProps;
});

const editFormProps = computed<EditFormProps>(() => {
  const formItems: FormItemProps[] = [
    {
      prop: "code",
      label: "项目编号",
      required: true,
      disabled: disabled.value,
      span: 12,
    },
    {
      prop: "type",
      label: "类型",
      required: true,
      as: "select",
      disabled: disabled.value,
      span: 12,
      options: {
        loadMethod: () => $api.lis.equipment.listAsOptions(),
      },
    },
    {
      prop: "equipmentManufacturerModel",
      label: "设备厂商型号",
      required: true,
      disabled: disabled.value,
      span: 12,
    },
    {
      prop: "personName",
      label: "检测者姓名",
      required: true,
      disabled: disabled.value,
      span: 12,
    },
    {
      prop: "item",
      label: "项目",
      required: true,
      disabled: disabled.value,
      span: 12,
    },

    {
      prop: "time",
      label: "检测时间",
      required: true,
      disabled: disabled.value,
      span: 12,
    },
    {
      prop: "data",
      label: "数据",
      required: true,
      disabled: disabled.value,
      span: 24,
      options: {
        type: "textarea",
        rows: 5,
      },
    },
  ];

  const editProps: EditFormProps = {
    model: editingObj.value,
    loading: loadingMap.save,
    items: formItems,
    columns: 1,
    size: "middle",
    onClose: () => {
      editingObj.value = null;
    },
    onCancel: () => {
      editingObj.value = null;
    },
    onValidate: (model: any) => {
      request("save", model);
    },
  };

  return editProps;
});

const onPageActions = (action: IAction, model?: any) => {
  switch (action.event) {
    case "add":
    case "edit":
      disabled.value = false;
      editingObj.value = $api.lis.lisData.$$createEntity(model);
      break;
    case "destroy":
      request("destroy", model ? model.id : "");
      break;
    case "check":
      disabled.value = true;
      editingObj.value = $api.lis.lisData.$$createEntity(model);
      break;
  }
};

watch(
  () => props.equimentId,
  (item) => {
    if (item) {
      request("listAsOptions");
      request("tableData", { type: item });
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped></style>
